<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">

    <!-- 此处设置对移动端页面开发很重要，该设置确保页面与设备相适应 -->
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link type="text/css" rel="stylesheet" href="resources/css/bootstrap.min.css">
    <link type="text/css" rel="stylesheet" href="resources/css/font-awesome.min.css">

    <title>Insert title here</title>

    <style type="text/css">
        html {
            height: 100%;
            /* 高度填充整个窗口 */
        }

        body {
            height: 100%;
            /* 高度填充整个html */
            padding: 0;
            /* 内边距为0 */
            margin: 0;
            /* 外边距为0 */
            background-color: #F5F5F5;
            /* 整个页面背景为淡灰色 */
            background-size: 100% 100%;
        }

        .my-container {

            position: fixed;
            /*固定定位*/
            left: 0px;
            top: 0px;
            right: 0px;
            bottom: 0px;

            /*background-color: red;*/

        }

        .my-header {
            /* position: absolute; */
            /*绝对定位，即相对于父元素的定位*/
            left: 0px;
            width: 100%;
            height: 40px;
            /* margin-top: 10px; */

            display: flex;
            /*定义本元素为flex容器*/

            /* 指定flex容器主轴排列方向（与其垂直的方向即为交叉轴）， flex容器内部元素的排列方向*/
            ;
            flex-direction: row;
            justify-content: flex-end;
            /*指定主轴的对齐方式*/
            align-items: center;
            /*指定交叉轴的对齐方式*/
            /* background-color:#ff3050; */
            /* background-color: #0077DD; */

        }

        .my-main {
            position: absolute;
            left: 0px;
            top: 40px;
            right: 0px;
            bottom: 40px;
            /* 实现滑动 */
            overflow: auto;
        }

        .my-footer {

            position: absolute;
            /*绝对定位，即相对于父元素的定位*/
            left: 0px;
            bottom: 0px;
            width: 100%;
            height: 50px;

            display: flex;
            flex-direction: row;

            border-top: 1px solid #DDDDDD;
            /*边框 粗细、线型、颜色 */

            /* background-color: #FFFFFF; */


        }

        .my-header-item {
            color: white;
            /*文字颜色*/
            margin: 0 5px 0 0;
            /* 上右下左四个外边距 */
            width: 45px;
            text-align: center;
            /*内部文本水平居中*/
            border-radius: 10px;
            /*设置边框圆角半径*/

        }

        .my-header-item:active {
            /*点击时的样式*/
            background-color: red;
            color: yellow;
        }

        .my-footer-item {
            /* border-right: 1px solid #EEEEEE;
            height: 100%;
            color: teal; */
            /*font-size:20px;*/

            /* flex: 1 1 auto; */
            /*设置在flex容器的元素上，用于设置自适应缩放*/

            /* display: flex;
            flex-direction: column;
            justify-content: center;
            padding-top: 3px; */
            border-right: 1px solid #EEEEEE;
            height: 100%;
            color: black;
            /*font-size:20px;*/

            flex: 1 1 auto;
            /*设置在flex容器的元素上，用于设置自适应缩放*/

            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;

            padding-top: 3px;



        }

        .my-home {
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .my-card {

            width: 96%;
            height: 180px;
            border: 1px solid #CCCCCC;
            border-radius: 10px;
            box-shadow: 0 0 5px 1px #CCCCCC;

            background-color: white;
            /*
        opacity: 0.3;
        */
            /*background: transparent;*/
            /*传递父元素的背景，即背景透明*/
            margin: 5px 0 5px 0;

            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: center;





        }

        .my-goods-info {
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

        .my-goods-info>div {
            margin-bottom: 5px;
        }
        .type{
            margin-top: 5px;
            margin-right: 140px;
            width: 100px;
            height: 30px;
            text-align: center;
            font-size: 20px;
            /* line-height: 14px; */
            color: #fff;
            border: none;
            font-weight: bold;
            /* 加粗 */
            /* background-color: whitesmoke; */
        }
    </style>

</head>

<body>
    <div id="app" class="my-container">

        <div style="background-image: url(resources/images/fbackground.png);">
            <div class="my-header">
                <!-- <template v-if="!loginUserID" >
            <div class="my-header-item" @click="toLogin" >登录</div>
            <div class="my-header-item" @click="toRegister" >注册</div>
            </template>
            <template v-else >
            <div  class="my-header-item" ><i class="fa fa-user"></i> {{loginUserID}}</div>
            <div class="my-header-item" @click="execLogout" >退出</div>  
            </template>   -->
            <div class="type">购物会场</div>
                <i @click="toHome" style="position:absolute;left:10px;top:5px;" class="fa fa-angle-left fa-2x"></i>
            </div>
        </div>

        <div class="my-main">
            <div style="background-image: url(resources/images/fbackground.png);">
                <div class="my-home" v-if="currVisible=='home'">
                    <div v-for="goods in list" class="my-card">
                        <img :src="$server.baseURL() + goods.picture" style="height:160px;">
                        <div class="my-goods-info" style="margin-left:10px;">
                            <div style="font-weight: bold;">{{goods.name}} <span
                                    style="color:#AA0000;font-size:16px;font-weight:bold;">￥{{goods.price}}</span></div>

                            <div>
                                <button type="button" class="btn btn-danger btn-sm"><i class="fa fa-shopping-cart"></i>
                                    加入购物车</button>
                            </div>
                        </div>



                    </div>
                </div>
            </div>
            <!-- <div class="my-search" v-if="currVisible=='search'">
            发现
        </div>
        <div class="my-mine" v-if="currVisible=='mine'" >
            我的
        </div> -->
        </div>

        <div class="my-footer">
            <!-- 若点击则是灰色，不点则是白色 -->
            <div id="home" class="my-footer-item" @click="currVisible='home'"
                :style="{backgroundColor:currVisible=='home'?'#ff4060':'#FFFFFF'}">
                <i class="fa fa-home fa-lg"></i>
                <span style="font-size:14px;">淘首页</span>
            </div>
            <div id="search" class="my-footer-item" 
                :style="{backgroundColor:currVisible=='search'?'#ff4060':'#FFFFFF'}">
                <i class="fa fa-shopping-cart fa-lg"></i>
                <span style="font-size:14px;">购物车</span>
            </div>
            <div id="mine" class="my-footer-item" style="border-right:none;"
                :style="{backgroundColor:currVisible=='mine'?'#ff4060':'#FFFFFF'}">
                <i class="fa fa-user fa-lg"></i>
                <span style="font-size:14px;">我的</span>
            </div>
        </div>

    </div>




</body>

<!-- 在body结尾之后引入以下js文件。 注意导入顺序不可以随意改变。 -->
<script src="resources/js/jquery-3.3.1.slim.min.js"></script>
<script src="resources/js/popper.min.js"></script>
<script src="resources/js/bootstrap.min.js"></script>
<script src="resources/js/vue.min.js"></script>
<script src="resources/layer_mobile/layer.js"></script>
<script src="resources/js/axios.min.js"></script>
<script src="resources/js/my-mobile.js"></script>

<script>
    /*
        vue是一个数据驱动式javascript框架：数据改变，界面即改变，需要改变界面，仅需改变数据。
    */



    var vm = new Vue({
        el: '#app',//指定渲染的元素
        data: {//定义数据
            list: [],
            currVisible: 'home',

            //当前登录账号
            // loginUserID:null,


        },
        methods: {//定义方法
            //调转到注册页
            // toRegister(){
            //     location.href='register.html';
            // },
            // toLogin(){
            //     location.href='login.html';
            // },
            toHome() {
                location.href = 'home.html';
            },
            execLogout() {
                this.$post('/execLogout.jsp')
                    .then(() => {
                        this.loginUserID = null;
                    });
            }
        },
        mounted() {//定义界面渲染完成后需要执行的代码
            //document.querySelector('#home').style.backgroundColor='#EEEEEE';
            this.currVisible = 'home';

            this.$setServerConfig({
                ip: 'localhost',
                port: 8080,
                app: 'xxx'
            });

            this.$get('http://localhost:8080/xxx/3.jsp')
                .then((data) => {
                    this.list = data;
                    console.log(this.list);
                });

            //获取登录用户
            // this.$get('/currUserID.jsp')
            //     .then((result)=>{
            //         this.loginUserID = result.data;
            //     })

        }
    });









</script>


</html>